import React, { Component } from "react"
import ReactDOM from "react-dom"
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { Page } from '../components/page'

import Actions from '../Actions'

var modules = {
    toolbar: [
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
        ['link'],
        ['clean']
    ],
}
var formats = [
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    "align",
    'list', 'bullet', 'indent',
    'link'
]
export default class ExternalLink extends Component {

    constructor(prop) {
        super(prop)
        this.state = { externalLinks: {} }
    }

    componentDidMount() {
        Actions.ExternalLink.getExternalLinks({ metaId: "ROOT", page: 0, size: 100 }).then(res => {
            let externalLinks = JSON.parse(res);
            this.setState({ externalLinks })
        });
    }
    _delete(id) {
        let meassege = prompt("请输入\"确认删除\"");
        if (meassege === "确认删除") {
            Actions.ExternalLink.deleteExternalLink({ externalLinkId: id }).then(res => {
                Actions.ExternalLink.getExternalLinks({ metaId: "ROOT", page: 0, size: 100 }).then(res => {
                    let externalLinks = JSON.parse(res);
                    this.setState({ externalLinks })
                });
            })
        }

    }


    render() {
        return <div className="row content-wrapper" style={{ paddingTop: 20 }}>
            <div className="panel panel-default">
                <div className="panel-heading">
                    链接列表
                    <span className="pull-right"><a href={location.pathname + "#/createExternalLink/ROOT"}>添加新的链接</a></span>
                </div>
                <div className="panel-body">
                    <div className="table-responsive">
                        <table className="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>最后修改时间</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.externalLinks.content && this.state.externalLinks.content.map((item, index) => {
                                        return <tr>
                                            <td>{index + 1}</td>
                                            <td>{item.resourcesName}</td>
                                            <td>{moment(item.createTime).format("YYYY.MM.DD")}</td>
                                            <td>{moment(item.lastModifiedTime).format("YYYY.MM.DD")}</td>
                                            <td>{item.viewOrder}</td>
                                            <td>
                                                <a href={`${location.pathname}#/editExternalLink/${item.id}`} className="btn btn-info">修改</a>
                                                <a onClick={this._delete.bind(this, item.id)} className="btn btn-danger">删除</a>
                                            </td>

                                        </tr>
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    }
}
export class EditeExternalLink extends Component {

    constructor(prop) {
        super(prop)
        this.state = { externalLink: { resourcesName: "", targetUrl: "", viewOrder: 0, info: "" }, updateExternalLink: {} }
    }

    componentWillMount() {
        console.log("ffffffffffffffffffffffff", this.props.params.id)
        if (this.props.params.id) {
            Actions.ExternalLink.getExternalLinkInfo({ id: this.props.params.id || "" }).then((res) => {
                let updateExternalLink = res ? JSON.parse(res) : {}
                this.setState({ updateExternalLink: updateExternalLink })
            })
        }
    }

    componentDidMount() {

    }

    _update(update) {
        if (this.props.params.id) {
            this.setState({ updateExternalLink: { ...this.state.updateExternalLink, ...update } })
        } else {
            this.setState({ externalLink: { ...this.state.externalLink, ...update } })
        }
    }

    submit() {

        if (this.props.params.id) {
            this._editeLink()

        } else {
            this._createLink()
        }

    }
    _editeLink() {
        let updateExternalLink = { ...this.state.updateExternalLink }

        console.log(updateExternalLink)
        Actions.ExternalLink.upadteExternalLink(updateExternalLink).then((res) => {
            let upadteExternalLink = res ? JSON.parse(res) : {}
            if (upadteExternalLink.id) {
                this.setState({ updateExternalLink: upadteExternalLink })
                toastr.success("操作成功")
                history.back()
            }
        })
    }
    _createLink() {
        let externalLink = { ...this.state.externalLink }
        externalLink.metaId = this.props.params.metaId
        let oder = parseInt(externalLink.viewOrder)

        externalLink.viewOrder = oder

        Actions.ExternalLink.createExternalLink(externalLink).then((res) => {
            let externalLink = res ? JSON.parse(res) : {}
            if (externalLink.id) {
                toastr.success("操作成功")
                history.back()
            }
        })
    }

    render() {
        let state = { ...this.state }
        return <div className="panel panel-default">

            <div className="panel-heading">
                <span className="glyphicon glyphicon-arrow-left" onClick={() => history.back()}><a>返回根目录</a></span>
                {<span className="pull-right">
                    <a onClick={() => this.submit(this)}><span className="glyphicon glyphicon-plus" aria-hidden="true">提交</span></a>
                </span>}
            </div>
            <div className="panel-body">
                <div className="form-group">
                    <label>资源名称</label>
                    <input className="form-control" value={this.props.params.id ? state.updateExternalLink.resourcesName : state.externalLink.resourcesName}
                        onChange={(event) => this._update({ resourcesName: event.target.value })}
                    />
                </div>
                <div className="form-group">
                    <label>资源链接</label>
                    <input className="form-control" value={this.props.params.id ? state.updateExternalLink.targetUrl : state.externalLink.targetUrl}
                        onChange={(event) => { this._update({ targetUrl: event.target.value }) }} />
                </div>
                <div className="form-group">
                    <label>展示顺序</label>
                    <input className="form-control" type="number" value={this.props.params.id ? state.updateExternalLink.viewOrder : state.externalLink.viewOrder}
                        onChange={(event) => { this._update({ viewOrder: parseInt(event.target.value) }) }}
                        max="99" />
                </div>
                <div className="form-group video">
                    <label>视频简介</label>
                    <ReactQuill
                        value={this.props.params.id ? state.updateExternalLink.info : state.externalLink.info}
                        modules={modules}
                        formats={formats}
                        onChange={(value) => {
                            console.log("value", value)
                            this._update({ info: value })
                        }}
                    />
                </div>
            </div>
        </div>
    }
}